<template>
  <div id="zhex" ref="zhex">
  </div>
</template>
<script>
export default {
  name: 'Zhex',
  data () {
    return {

    }
  },
  components: {

  },
  mounted () {
    this.reviewEcharts1()
  },
  methods: {
    reviewEcharts1 () {
      const echarts = require('echarts')
      const myChart1 = echarts.init(this.$refs.zhex)
      const option1 = {
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['yi', 'er', 'san', 'si', 'wu', 'liu', 'qi'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          }
        }],
        series: [{
          data: [810, 1000, 900, 940, 1200, 1310, 1220],
          type: 'line',
          areaStyle: {}
        }]
      }
      myChart1.setOption(option1)
    }
  }
}
</script>
<style lang="scss">
  #zhex{
  width: 140px;
  height: 80px;
  }
</style>
